﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductHorizontalBar.ascx.cs" Inherits="Control_ProductHorizontalBar" %>
<asp:Label ID="LB_ProductHorizontalBar" runat="server" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<div id="demo" style="overflow: hidden; width: 650px; height: 180px">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td id="demo1">
                <asp:DataList ID="DL_HorizontalList" runat="server" CellPadding="5" CellSpacing="10"
                    DataKeyField="Product_ID" RepeatDirection="Horizontal">
                    <ItemTemplate>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td>
                                    <div align="center">
                                        <a href='ProductInfo.aspx?ProductID=<%# Eval("Product_ID") %>'>
                                            <img alt="" height="120" src='UploadImage/<%# Eval("Product_SmallThumb") %>'
                                                style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px"
                                                width="160" /></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td height="10">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div align="center">
                                        <a href='ProductInfo.aspx?ProductID=<%# Eval("Product_ID") %>'>
                                            <%# Eval("Product_Title")%>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
            </td>
            <td id="demo2">
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var speed=50
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth;}else{demo.scrollLeft+=2}}
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>